<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form
        :model="form"
        ref="form"
        label-position="left"
        label-width="80px"
        onsubmit="return false"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect2
                v-model="bizOrgNo"
                :optionlist="companyList"
                :valuekey="{ name: 'name', value: 'id' }"
                @changeSelect="companyChange"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="19" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="chaxun" @chongzhi="chongzhi"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="titlebox">
        <div class="text"></div>
        <TopTile
          @command="command"
          @daochu="daochu"
          @shuaxin="shuaxin"
        ></TopTile>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        ref="table"
        :size="iissize"
        :header-cell-style="{
          background: '#f5f5f5',
          'text-align': 'center'
        }"
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" align="center" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="companyName" label="用电企业"> </el-table-column>
        <el-table-column prop="className" label="设备名称"> </el-table-column>
        <el-table-column prop="savingAdvice" label="节能建议">
        </el-table-column>
        <el-table-column align="right" prop="savingRate" label="预计节能率">
          <template slot-scope="scope">
            {{ scope.row.savingRate.toFixed(2) + '%' }}
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="lastYearUsage"
          label="近一年用电量(kWh)"
        >
          <template slot-scope="scope">
            {{ scope.row.lastYearUsage.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="yearSaving"
          label="年预计节能量(kWh)"
        >
          <template slot-scope="scope">
            {{ scope.row.yearSaving.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="carbonEmissions"
          label="预计减少CO2排放量(t)"
        >
          <template slot-scope="scope">
            {{ scope.row.carbonEmissions.toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageobj._pageNo"
          @current-change="getdatalist()"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import { saveAs } from 'file-saver'
import {
  getCompanyListApi,
  getPageListApi
} from '@/api/energy-consumption/Equipment-energy/Saving-evaluation'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'EnergySaver',
  data() {
    return {
      bizOrgNo: '',
      isEdit: 'add',
      DialogVisible: false,
      form: {},
      dialogForm: {},
      isheight: 72,
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      iissize: 'medium',
      loading: false,
      tableData: [],
      total: 0,
      pageobj: {
        _pageNo: 0,
        _pageSize: 10
      },
      companyList: []
    }
  },

  async mounted() {
    await this.getCompanyList()
    await this.getdatalist()
  },
  methods: {
    companyChange(val) {
      if (val) {
        localStorage.setItem('companyId', val)
      }
    },
    // 获取用电企业列表
    async getCompanyList() {
      const res = await getCompanyListApi({ companyId: this.bizOrgNo })
      this.companyList = res.data.list
      const companyId = +localStorage.getItem('companyId')
      if (companyId && this.companyList.find((i) => i.id == companyId)) {
        this.bizOrgNo = companyId
      } else {
        this.bizOrgNo = this.companyList[0].id
      }
    },
    // 初始化
    async getchushihua() {
      this.bizOrgNo = this.companyList[0].id
      localStorage.setItem('companyId', this.companyList[0].id)
    },
    // 获取数据
    async getdatalist() {
      this.loading = true
      const res = await getPageListApi({
        companyId: this.bizOrgNo,
        pageNo: this.pageobj._pageNo - 1,
        pageSize: 10
      })
      console.log(res)
      this.tableData = res.data.list
      this.total = res.data.totalCount
      console.log(this.total)
      this.loading = false
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist('')
      this.$message({
        type: 'success',
        message: '列表刷新成功',
        duration: 2000
      })
    },
    chaxun() {
      this.getdatalist()
    },
    // 导出
    daochu() {
      exportexcel(
        '/ecm-microservice-biz/ecm/saving/prediction/export',
        { companyId: this.bizOrgNo },
        '节能预估'
      )
    },
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },

    async chongzhi() {
      await this.getchushihua()
      this.getdatalist('')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-select-dropdown__item {
  padding: 0 !important;
}
.option {
  height: auto;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.bigbox {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .topbox {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .bodybox {
    flex: 1;
    background-color: #fff;
    margin-top: 10px;
    padding: 20px 20px 20px 20px;
    .titlebox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .text {
        font-weight: bold;
        font-size: 18px;
      }
      .right {
        align-items: center;
        i {
          margin-left: 10px;
        }
        .bewdao {
          width: 63px;
          height: 32px;
        }
        .daochu {
          background-color: #1890ff;
          color: #fff;
          border: none;
          border-radius: 3px;
        }
      }
    }
    .fenye {
      margin-top: 15px;
      text-align: right;
    }
  }
}
// ::v-deep .el-form-item__content {
//   width: calc(100% - 100px);
// }
// ::v-deep .el-col-6 {
//   height: 42px;
//   text-align: right;
// }
// ::v-deep .el-input__inner {
//   height: 32px;
// }
// ::v-deep.el-form--inline {
//   height: 100% !important;
//   box-sizing: border-box;
// }
// ::v-deep .el-input__icon {
//   line-height: 20px;
// }
</style>
